
<template>
  <div>
    <el-row class="el-top">
      <el-col :span="24" class="tag">
        <i class="el-icon-edit"> </i>
        <span>标签:</span>
        <span
          :class="{ active: index == isActive }"
          v-for="(item, index) in arr.learn"
          :key="index"
          @click="showdifference(index)"
          >{{ item.major }}</span
        >
      </el-col>
      <el-col :span="24" class="tag span-btn">
        <div class="btn-one">
          <i class="el-icon-help"> </i>
          <span>排序:</span>
        </div>
        <div class="btn-two">
          <el-button-group>
            <el-button
              type="primary"
              native-type="button"
              v-for="(item, index) in arr.title"
              :key="index"
              @click="switchtabs(index)"
              class="clearfix"
              :class="{ active: index === curId }"
              >{{ item.title }}</el-button
            >
          </el-button-group>
        </div>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col
        class="ell-row"
        v-for="(item, index) in arr.tabs"
        :key="index"
        v-show="index===curId"
        :class="currentIndex == index ? 'current' : ''"
      >
        <div
          class="grid-content bg-purple heigth"
          v-for="(item, index) in item.tabsname"
          :key="index"
        >
          <div class="horizontal">
            <div class="heigth-left">
              <span class="one">{{ item.headline }}</span>
              <span>{{ item.introduction }} </span>
            </div>
            <div class="heigth-right">
              <img :src="item.img" alt="" />
            </div>
            <div class="content-btn">
              <span v-for="(item, index) in item.name" :key="index">{{
                item.itemname
              }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row> -->
    <div
      class="conten"
      v-for="(item, index) in arr.tabs"
      :key="index"
      v-show="index === curId"
    >
      <div
        class="conten-cont"
        v-for="(item, index) in item.tabsname"
        :key="index"
      >
        <div class="horizontal">
          <div class="heigth-left">
            <span class="one">{{ item.headline }}</span>
            <span>{{ item.introduction }}</span>
          </div>
          <div class="heigth-right">
            <img :src="item.img" alt="" />
          </div>
          <div
            class="content-btn"
            v-for="(item, index) in item.name"
            :key="index"
          >
            <span>{{ item.itemname }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div 
        class="conten-bt"
        v-for="(item, index) in arr.tabs"
        :key="index"
        v-show="index===curId"
        :class="(index + 1) % arr.tabs.length == 0 ?'noright':'margin-right-10'"
      >
        <div
          class="horizontal" 
          v-for="(item, index) in item.tabsname"
          :key="index"
        >
          <div class="heigth-left">
            <span class="one">{{ item.headline }}</span>
            <span>{{ item.introduction }}</span>
          </div>
          <div class="heigth-right">
            <img :src="item.img" alt="" />
          </div>
          <div class="content-btn">
            <span v-for="(item, index) in item.name" :key="index">{{
              item.itemname
            }}</span>
          </div>
        </div>
      </div> -->
    <div class="footer">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="50"
        :page-size="size"
        :current-page="page"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import { Options, Vue } from 'vue-class-component';
import vComponent from "@/components/component.vue";
///////获取模拟的json数据
import { fetchData } from "../api/index";
export default {
  name: "course",
  components: {
    vComponent,
  },
  data() {
    return {
      curId: 0,
      arr: [], /////把json数据存到数组里面
      isActive: "",
      search: "",
      username: "",
      name: localStorage.getItem("username"),
      size: 6, ///每页展示的条数
      page: 1 ///当前第几页
    };
  },

  // computed: {
  //   role() {
  //     return this.name === "admin" ? "超级管理员" : "普通用户";
  //   },
  // },
  //////////////////////////
  created() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      fetchData().then((res) => {
        console.log(res);
        // const arr=JSON.parse(res);
        // console.log(arr);
        this.arr = res;
        // this.pageTotal = res.pageTotal || 50;
      });
    },
    /////点击文字变色
    showdifference(index) {
      this.isActive = index;
      console.log(this.isActive);
    },
    ////////////切换选项卡
    switchtabs(index) {
      //实现选项卡切换操作：本质就是操作类名
      this.curId = index;
    },
    ////////////////
    handlePageChange(val) {
      // this.$set("pageIndex", val);
      // this.page=val;
      // this.getData();
      this.page = 1;
      this.page=val
    },
    // handleSizeChange(val){
    //   this.page=val
    // }
  },
};
</script>

<style  lang="less" scoped>
.footer {
  float: right;
  margin-top: 10px;
}

//////////选项卡操作
.clearfix {
  zoom: 1;
}
.clearfix:after {
  display: block;
  content: "";
  clear: both;
}
.el-top {
  width: 100%;
  background: #fff;
  line-height: 50px;
  margin-top: 20px;
}
.tag {
  padding-left: 50px;
}
.tag span {
  margin-right: 26px;
  padding: 0 8px;
  cursor: pointer;
}
/* 显示样式 */
.active {
  border-radius: 5%;
  background-color: #1890ff;
  color: #fff;
}

.btn-one {
  float: left;
  width: 90px;
  height: 50px;
}
.btn-one span {
  margin-right: 20px;
}
.btn-two {
  float: left;
  width: 400px;
  height: 50px;
}
.span-btn .btn {
  display: inline-block;
  width: 50px;
  height: 20px;
  border: #1890ff solid 1px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  /* border-radius: 4px; */
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-row {
  margin-top: 20px;
}
.heigth {
  width: 340px;
}
.heigth-left {
  float: right;
  width: 200px;
  height: 120px;
}
.heigth-left span {
  display: block;
  font-size: 12px;
}
.heigth-left .one {
  height: 50px;
  font-size: 14px;
  font-weight: 600;
  line-height: 50px;
}
.heigth-right {
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.heigth-right img {
  width: 100px;
  height: 100px;
}
.content-btn {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
.content-btn span {
  display: inline-block;
  float: right;
  cursor: pointer;
  margin: 15px 8px 0 0;
  padding: 0 7px;
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
}

.conten {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
.conten-cont {
  // float: left;
  margin: 20px 0px 0px 0px;

  width: 330px;
  height: 230px;
  background-color: #fff;
}
.conten-bt,
.horizontal {
  width: 330px;
  height: 200px;
  background: #fff;
}
</style>
